<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-07-13 11:48:21
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-12-23 10:31:10
-->
<template>
  <div style="padding: 50px;">
    <h1>demo0</h1>
    <el-table :data="tableData" :span-method="objectDemo0Method" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）">
      </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）">
      </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）">
      </el-table-column>
    </el-table>


    <h1>demo1</h1>
    <el-table :data="showTableData" tooltip-effect="dark" :span-method="arraySpanMethod"
      :header-cell-style="{background: '#F5F6F8', color: '#444444'}" border height='100%' v-loading='mulLoading'>
      <el-table-column prop="dataDate" align='center' label="日期"></el-table-column>
      <el-table-column prop='indexNo' align='center' label='指标编号'></el-table-column>
      <el-table-column prop="indexNm" align='center' label=" 指标名称" show-overflow-tooltip>
        <template slot-scope='scope'>
          <div>
            <span v-if='!scope.row.power'>
              <el-button type='primary' size='small' @click='handleClick'>申请</el-button>
            </span>
            <span v-else>{{scope.row.indexNm}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" align='center' label="类型"></el-table-column>
      <el-table-column prop="unit" align='center' label="单位"></el-table-column>
      <el-table-column prop="indexVal" align='center' label="本期值" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.indexVal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="yearVal" align='center' label="同比值">
        <template slot-scope="scope">
          {{scope.row.yearVal}}
        </template>
      </el-table-column>
      <el-table-column prop="monthVal" align='center' label='环比值'>
        <template slot-scope="scope">
          {{scope.row.monthVal}}
        </template>
      </el-table-column>
    </el-table>
    <h1>demo2</h1>
    <el-table :data="showTableData" tooltip-effect="dark" :header-cell-style="{background: '#F5F6F8', color: '#444444'}"
      border height='100%' v-loading='mulLoading'>
      <el-table-column prop="dataDate" align='center' label="日期"></el-table-column>
      <el-table-column prop='indexNo' align='center' label='指标编号'></el-table-column>
      <el-table-column prop="indexNm" align='center' label=" 指标名称" show-overflow-tooltip>
        <template slot-scope='scope'>
          <div>
            <span v-if='!scope.row.power'>**</span>
            <span v-else>{{scope.row.indexNm}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center' label="类型">
        <template slot-scope='scope'>
          <div>
            <span v-if='!scope.row.power'>**</span>
            <span v-else>{{scope.row.type}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center' label="单位">
        <template slot-scope='scope'>
          <div>
            <span v-if='!scope.row.power'>**</span>
            <span v-else>{{scope.row.unit}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="indexVal" align='center' label="本期值" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if='!scope.row.power'>**</span>
          <span v-else>{{scope.row.indexVal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="yearVal" align='center' label="同比值">
        <template slot-scope="scope">
          <span v-if='!scope.row.power'>**</span>
          <span v-else>{{scope.row.yearVal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="monthVal" align='center' label='环比值'>
        <template slot-scope="scope">
          <span v-if='!scope.row.power'>**</span>
          <span v-else>{{scope.row.monthVal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="monthVal" align='center' label='环比值'>
        <template slot-scope="scope">
          <span v-if='!scope.row.power'>**</span>
          <span v-else>{{scope.row.monthVal}}</span>
        </template>
      </el-table-column>
    </el-table>

    <h1>demo3</h1>
    <div style="margin-top: 20px;">
      <el-row :gutter="24">
        <el-col :span="5"><span>指标编号</span></el-col>
        <el-col :span="5"><span>指标名称</span></el-col>
        <el-col :span="5"><span>单位</span></el-col>
        <el-col :span="5"><span>系统值</span></el-col>
        <el-col :span="4"><span>操作</span></el-col>
      </el-row>
    </div>
    <div class="content">
      <el-row :gutter="24">
        <el-col :span="5"><span>102112</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="4"><span>***</span></el-col>
        <div class="apply">
          <el-button size='mini' type='primary'>申请</el-button>
        </div>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="5"><span>102112</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="4"><span>***</span></el-col>
        <div class="apply">
          <el-button size='mini' type='primary'>申请</el-button>
        </div>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="5"><span>102112</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="5"><span>***</span></el-col>
        <el-col :span="4"><span>***</span></el-col>
        <div class="apply">
          <el-button size='mini' type='primary' style="width: 100px;">申请</el-button>
        </div>
      </el-row>
    </div>

    <h1 style="margin-top: 20px;">demo4</h1>

    <el-table :data="participatorList" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="orgName" label="接入方"> </el-table-column>
      <el-table-column prop="name" label="报名人员名称"> </el-table-column>
      <el-table-column prop="num" label="报名人分数"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'tabledemo',
    head() {
      return {
        title: 'table模版'
      }
    },
    data() {
      return {
        participatorList: [{ "orgId": 59, "activityId": 3, "name": "a", "num": 1, "orgName": "逐日信息科技" },
        { "orgId": 59, "activityId": 3, "name": "b", "num": 2, "orgName": "逐日信息科技" },
        { "orgId": 59, "activityId": 3, "name": "c", "num": 13, "orgName": "逐日信息科技" },
        { "orgId": 59, "activityId": 3, "name": "d", "num": 12, "orgName": "逐日信息科技" },
        // { "orgId": 66, "activityId": 3, "name": "e", "num": 11, "orgName": "逐日信息科技1" },
        { "orgId": 66, "activityId": 3, "name": "f", "num": 11, "orgName": "逐日信息科技1" }],
        showTableData: [{
          dataDate: '2020-05-05',
          indexNo: '201308003328',
          indexNm: 1,
          type: '系统值',
          unit: '元',
          indexVal: '100',
          yearVal: '0.5',
          monthVal: '0.3',
          power: 1,
        }, {
          dataDate: '2020-06-05',
          indexNo: '201308003328',
          indexNm: 1,
          type: '系统值',
          unit: '元',
          indexVal: '100',
          yearVal: '0.5',
          monthVal: '0.3',
          power: 1,
        }, {
          dataDate: '2020-05-14',
          indexNo: '201308003328',
          indexNm: 1,
          type: '系统值',
          unit: '元',
          indexVal: '100',
          yearVal: '0.5',
          monthVal: '0.3',
          power: 0,
        }, {
          dataDate: '2020-05-14',
          indexNo: '201308003328',
          indexNm: 1,
          type: '系统值',
          unit: '元',
          indexVal: '100',
          yearVal: '0.5',
          monthVal: '0.3',
          power: 0,
        }],

        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987122',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
        mulLoading: false
      }
    },
    filters: {

    },
    created() {
      this.handleParticipator()
    },
    methods: {

      //获取并处理数据
      handleParticipator() {
        //处理数据
        for (let i = this.participatorList.length - 1; i > 0; i--) {
          //从后向前遍历
          if (!this.participatorList[i].rowspan) {
            //设置初始值(可理解为：每个数据项必定占一行)
            this.participatorList[i].rowspan = 1;
          }
          if (
            this.participatorList[i].orgId == this.participatorList[i - 1].orgId
          ) {
            //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
            this.participatorList[i - 1].rowspan =
              this.participatorList[i].rowspan + 1;
            this.participatorList[i].rowspan = 0;
          }
        }
      },
      objectDemo0Method({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 0) {
          if (rowIndex % 2 == 0) {
            return {
              rowspan: 2,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      //合并展示
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (row.rowspan != 1) {
            return {
              rowspan: row.rowspan,
              colspan: 1,
            };
          } else if (row.rowspan == 0) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            return {
              rowspan: 1,
              colspan: 1
            }
          }
        }
      },
      handleClick() {

      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (!row.power) {
          if (columnIndex === 2) {
            return [1, 6];
          } else if (columnIndex > 2) {
            return [0, 0];
          }
        }
      },
      arraySpanMethod1({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      }
    },
  }
</script>
<style scoped lang="scss">
  .el-row {
    border: 1px solid #EBEEF5;
    height: 40px;
    line-height: 40px;

    .el-col {
      border-right: 1px solid #EBEEF5;
    }
  }

  .apply {
    position: absolute;
    width: 79%;
    height: 40px;
    line-height: 40px;
    /* background: red; */
    right: 0;
    z-index: 0.5;
    /* opacity: 0.5; */
    background-color: rgba(228, 228, 228, 0.5);
    text-align: center;
  }
</style>